<template>
  <p class="login-title">找回密码</p>
  <a-form layout="vertical" :model="formState" @finish="$emit('backToLogin')">
    <a-form-item name="user" :rules="{ required: true, message: '请输入邮箱' }">
      <a-input v-model:value="formState.user" placeholder="您的邮箱">
        <template #prefix><UserOutlined /></template>
      </a-input>
    </a-form-item>
    <a-form-item
      name="verifyCode"
      :rules="{ required: true, message: '请输入验证码' }"
    >
      <a-input-group compact>
        <a-input
          v-model:value="formState.verifyCode"
          type="password"
          placeholder="验证码"
          class="verify-code"
        >
        </a-input>
        <a-button type="primary">获取验证码</a-button>
      </a-input-group>
    </a-form-item>
    <a-form-item
      name="password"
      :rules="{ required: true, message: '请输入新的密码' }"
    >
      <a-input
        v-model:value="formState.password"
        type="password"
        placeholder="新的密码"
      >
        <template #prefix><LockOutlined /></template>
      </a-input>
    </a-form-item>
    <a-form-item
      name="confirmPassword"
      :rules="{ required: true, message: '请输入确认密码' }"
    >
      <a-input
        v-model:value="formState.confirmPassword"
        type="password"
        placeholder="确认密码"
      >
        <template #prefix><LockOutlined /></template>
      </a-input>
    </a-form-item>
    <a-form-item class="login-button">
      <a-button size="large" block type="primary" html-type="submit">
        确认修改
      </a-button>
      <p class="extra">
        已有账号？<a-button type="link" @click="$emit('backToLogin')"
          >点击登录</a-button
        >
      </p>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
defineEmits<{ backToLogin: [] }>();
const formState = reactive<{
  user?: string;
  password?: string;
  verifyCode?: string;
  confirmPassword?: string;
}>({});
</script>
<style lang="scss" scoped>
.verify-code {
  width: calc(100% - 140px);
  margin-right: 30px !important;
}
.extra {
  text-align: center;
}
</style>
